<script setup lang="ts">
  const { title, sub, extra } = defineProps(['title', 'sub', 'extra'])
</script>
<template>
  <div class="checkout-form-container">
    <div class="checkout-form-title">
      {{ title }}
    </div>
    <div class="extra">
      <slot name="extra"></slot>
    </div>
    <div v-if="sub" class="checkout-form-sub">{{ sub }}</div>
    <div class="checkout-form-body">
      <slot></slot>
    </div>
  </div>
</template>

<style src="./CheckoutForm.less" lang="less" scoped></style>